<template>
  <div class="products">
    <mt-swipe>
        <mt-swipe-item><img src="../assets/banner1.png" alt=""></mt-swipe-item>
        <mt-swipe-item><img src="../assets/banner2.png" alt=""></mt-swipe-item>
        <mt-swipe-item><img src="../assets/banner3.png" alt=""></mt-swipe-item>
    </mt-swipe>
    <div>
        <mt-cell title='保量低风险'>
         <i slot="icon" class="iconfont icon-shuxian" style="color:#EC711F;position:relative;top:2px;border-radius:2px;"></i>
        </mt-cell>
        <div class="fx-content" @click="handInva()">
            <p class="fx-content-t">{{adList[0].name}}</p>
            <p class="fx-content-m">+{{adList[0].profit| getRes}}%</p>
            <p class="fx-content-d">近{{getMontha}}年化收益率</p>
            <div class="getBtn">领取1 ETH·免费学理财</div>
        </div>
    </div>
    <div class="products_sel">
        <ul style="font-weight:600;">
            <li :class="{sel_active:item == sel}" @click="getData(item)" v-for="(item,index) in tabs" :key="index">{{item}}</li>
        </ul>
    </div>
    <div class="p_ul-con">
        <div class="p_ul-item">
            <div class="p_ul-header">保量类产品</div>
            <div class="p_ul-list-con">
                 <div class="p_ul-list">
                     <router-link :to="{path:'/detail?id='+item.id}"  v-for="(item,index) in blist" v-if="index < 3" :key="index">
                        <div class="p_ul-list-item">
                            <p class="time">锁定期 {{item.days}}</p>
                            <p class="num">{{item.profit | getRes}}%</p>
                            <p class="year-num">预期年化收益率</p>
                        </div>
                     </router-link>
                </div>
            </div>
        </div>
        <div class="p_ul-item">
            <div class="p_ul-header">浮收类产品</div>
            <div class="p_ul-list-con">
                 <div class="p_ul-list">
                     <router-link :to="{path:'/detail?id='+item.id}"  v-for="(item,index) in flist"  v-if="index < 3" :key="index">
                        <div class="p_ul-list-item">
                            <p class="time">锁定期 {{item.days}}</p>
                            <p class="num">{{item.profit | getRes}}%</p>
                            <p class="year-num">预期年化收益率</p>
                        </div>
                     </router-link>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-top:10px;" v-if="three.length > 0">
        <mt-cell title="高收益类产品">
        <i slot="icon" class="iconfont icon-shuxian" style="color:#EC711F;position:relative;top:2px;border-radius:2px;"></i>
        </mt-cell>
        <div class="p_top_cp" >
            <div class="p_ul-list-con">
                <div class="p_ul-list">
                    <router-link :to="{path:'/detail?id='+item.id}" v-for="(item,index) in three"  v-if="index < 3" :key="index">
                        <div class="p_ul-list-item">
                            <p class="time">锁定期 {{item.days}}</p>
                            <p class="num">{{item.profit | getRes}}%</p>
                            <p class="year-num" v-if="index==0">预期年化收益率</p>
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
</div>
     <div style="margin-top:10px;" >
         <mt-cell :title="sel+'浮收类产品'">
         <i slot="icon" class="iconfont icon-shuxian" style="color:#EC711F;position:relative;top:2px;border-radius:2px;"></i>
        </mt-cell>
        <div class="fx-content" @click="handItem()">
            <p class="fx-content-t">{{flist[0].name}}</p>
            <p class="fx-content-m">+{{flist[0].profit}}.00%</p>
            <p class="fx-content-d">近{{getMonth}}年化收益率</p>
            <div class="getBtn">立即赚币</div>
        </div>
     </div>
    <div class="line"></div>
     <div class="bootom-adv" @click="handRule">
         <img src="../assets/bottom.png" alt="">
     </div>
    
     <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="products">
        <router-link to="/">
            <i class="iconfont icon-chanpin1"></i>
            产品
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="mine">
        <router-link to="/mine">
            <i class="iconfont icon-wode2"></i>
            我的
        </router-link>
      </mt-tab-item>
    </mt-tabbar>

  </div>
  
</template>
<script>
import { Header, Swipe, SwipeItem } from "mint-ui";
import { getIndex } from "../api/api.js";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import util from "../assets/js/util.js";
export default {
  name: "Products",
  data() {
    return {
      msg: "",
      selected: "products",
      blist: [], //保量
      flist: [{
          name:""
      }], //浮动
      three:[],
      cycle: [], //收益周期
      coinList: [], //币种,
      list: [],
      tabs: ["BTC", "ETH", "EOS", "USDT"],
      sel: "",
      adList: [{
          profit:""
      }]
    };
  },
  filters: {
    getRes(res) {
    //   console.log(res.toFixed(2));
      if(res){
          return res.toFixed(2);
      }else{
          return "";
      }
      
    }
  },
  computed: {
    ...mapState(["pageInfo"]),
    getMonth() {
      let month = 0;
      this.cycle.forEach(item => {
        if (item.key == this.flist[0].dayType) {
          month = item.value;
        }
      });
      return month;
    },
    getMontha() {
      let month = 0;
      this.cycle.forEach(item => {
        if (item.key == this.adList[0].dayType) {
          month = item.value;
        }
      });
      return month;
    }
  },
  methods: {
    handRule() {
      this.$router.push({
        path: "/risk"
      });
    },
    handItem() {
      this.$router.push({
        path: "/detail",
        query: {
          id: this.list[0].id
        }
      });
    },
    handInva() {
      this.$router.push({
        path: "/invitation"
      });
    },
    getData(x) {
      // this.blist = [];
      // this.flist= [];
      this.sel = x;
      let para = {
        token: sessionStorage.getItem("token")
          ? JSON.parse(sessionStorage.getItem("token"))
          : "",
        coinType: x
      };

      this.$ajaxGet("productIndx", para).then(res => {
        this.cycle = res.cycle;
        this.tabs = res.coinList;
        this.pageInfo.coinType = res.coinList;
        this.list = res.list;
        util.setLocalStorage("coinType", JSON.stringify(res.coinList));
        let blist = [];
        let flist = [];
        let three = []
        res.list.forEach((item, index) => {
          item.days = this.getTime(item.dayType);
          if (item.type == 1) {
            blist.push(item);
          } else if(item.type ==2) {
            flist.push(item);
          }else{
              three.push(item);
          }
        });
        this.blist = blist;
        this.flist = flist;
        this.three = three;
      });
    },
    getTime(days) {
      let res = this.cycle.filter(item => {
        return item.key == days;
      });
      return res[0].value;
    },
    initUserinfo() {
      if (!util.getLocalStorage("userinfo")) {
        this.$ajaxGet("userInfo", {
          id: this.$route.query.id,
          token: this.$route.query.token
        }).then(res => {
          this.pageInfo.userinfo = res.data;
          util.setLocalStorage(
            "userinfo",
            JSON.stringify(this.pageInfo.userinfo)
          );
          util.setLocalStorage("token", this.$route.query.token);
          this.getData("BTC");
          this.getAd();
        });
      }
    },
    getAd() {
      this.$ajaxGet("giveList", {
        pageNum: 1,
        pageSize: 10
      }).then(res => {
        this.adList = res.list;
        util.setLocalStorage("adid", res.list[0].id);
      });
    }
  },
  mounted() {},
  created() {
    this.initUserinfo();
    this.getData("BTC");
    this.getAd();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
